<!-- src/views/dashboard/NodeDashboard.vue -->
<template>
  <div class="dashboard-container">
    <!-- 主图表容器 -->
    <div
      ref="chartContainer"
      class="glow-chart-container"
      :style="{ height: chartHeight }"
    ></div>

    <!-- 全绿状态提交按钮 -->
    <transition name="el-zoom-in-center">
      <el-button
        v-if="allGreen"
        type="success"
        class="submit-btn"
        @click="handleAdd"
      >
        提交信息
      </el-button>
    </transition>

    <!-- 添加或修改学位点对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="pointName">
          <el-input v-model="form.pointName" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="编码" prop="pointCode">
          <el-input v-model="form.pointCode" placeholder="请输入编码" />
        </el-form-item>
        <el-form-item label="所属院系" prop="department">
          <el-input v-model="form.department" placeholder="请输入所属院系" />
        </el-form-item>
        <el-form-item label="联系人" prop="contactPerson">
          <el-input v-model="form.contactPerson" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
        </el-form-item>
        <!-- <el-form-item label="用户ID" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户ID" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import resize from "@/mixins/resize";
import { getData } from "@/api/Echarts/data"; // 接口引用[5](@ref)
import { addPoints, updatePoints } from "@/api/DegreePoints/points";

export default {
  mixins: [resize],
  data() {
    return {
      chart: null,
      nodes: Array(6)
        .fill()
        .map((_, i) => ({
          name: `节点${i + 1}`,
          value: Math.random() > 0.5 ? 0 : 1,
          x: (i % 3) * 300 + 150, // 非对称X坐标计算
          y: Math.floor(i / 3) * 250 + 150, // 错落Y坐标
        })),
      chartHeight: "900px",
      // 学位点表格数据
      pointsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pointName: null,
        pointCode: null,
        department: null,
        contactPerson: null,
        contactPhone: null,
        userId: null,
        status: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        pointName: [
          { required: true, message: "名称不能为空", trigger: "blur" },
        ],
        pointCode: [
          { required: true, message: "编码不能为空", trigger: "blur" },
        ],
        department: [
          { required: true, message: "所属院系不能为空", trigger: "blur" },
        ],
        contactPerson: [
          { required: true, message: "联系人不能为空", trigger: "blur" },
        ],
        contactPhone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
        ],
        userId: [
          { required: true, message: "用户ID不能为空", trigger: "blur" },
        ],
      },

      daipingjia: false,
      pingjiawancheng: false,
    };
  },
  computed: {
    allGreen() {
      return this.nodes.every((n) => n.value !== 0);
    },
  },
  mounted() {
    this.initChart();
    this.fetchNodesData();
    this.reset();
  },
  methods: {
    // 初始化图表
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer, "macarons");
      this.updateChart();
    },

    // 获取节点数据
    fetchNodesData() {
      getData()
        .then((response) => {
          this.nodes = response.data.map((node, i) => ({
            ...node,
            x: (i % 3) * 300 + 150, // 非对称X坐标计算
            y: Math.floor(i / 3) * 250 + 150, // 错落Y坐标
          }));
          this.updateChart();
        })
        .catch((error) => {
          console.error("获取节点数据失败", error);
        });
    },

    // 表单重置
    reset() {
      this.form = {
        pointId: null,
        pointName: null,
        pointCode: null,
        department: null,
        contactPerson: null,
        contactPhone: null,
        userId: null,
        status: null,
        createdAt: null,
        updatedAt: null,
      };
      this.resetForm("form");
    },

    handleAdd() {
      // this.reset();
      this.open = true;
      this.title = "添加学位点";
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    /** 表单提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.pointId != null) {
            updatePoints(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPoints(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    updateChart() {
      const option = {
        animationDuration: 1000,
        series: [
          {
            type: "graph",
            layout: "none", // 手动控制布局
            roam: true,
            focusNodeAdjacency: true,
            symbolSize: 60,
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [6, 12],
            label: {
              show: true,
              fontSize: 16, // 增加字体大小
              color: "#333", // 确保颜色对比度
              backgroundColor: "rgba(255, 255, 255, 0.8)", // 添加背景色
              padding: [5, 10], // 增加内边距
              borderRadius: 5, // 圆角背景
              borderColor: "#ccc", // 边框颜色
              borderWidth: 1, // 边框宽度
              position: "bottom", // 文字信息置于节点下方
              offset: [0, 10], // 调整偏移量，确保标签位于节点下方
            },
            data: this.nodes.map((node) => ({
              ...node,
              itemStyle: this.getNodeStyle(node.value),
              emphasis: {
                itemStyle: {
                  shadowBlur: 30,
                  shadowColor: node.value
                    ? "rgba(0,255,0,0.8)"
                    : "rgba(255,0,0,0.8)",
                },
              },
            })),
            itemStyle: {
              cursor: "pointer", // 设置鼠标悬停时的光标样式
            },
            events: {
              click: this.onNodeClick, // 添加点击事件监听
            },
          },
        ],
      };
      this.chart.setOption(option);
    },

    // 节点样式生成器
    getNodeStyle(value) {
      return {
        color: value ? "#52c41a" : "#ff4d4d",
        shadowBlur: value ? 25 : 30,
        shadowColor: value ? "rgba(0,255,0,0.6)" : "rgba(255,0,0,0.8)",
        borderWidth: 3,
        borderColor: "#ffffff",
        opacity: 0.9,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;

  .glow-chart-container {
    background: radial-gradient(circle at center, #f0f2f5 0%, #e6e8eb 100%);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  .submit-btn {
    position: absolute;
    right: 40px;
    bottom: 40px;
    padding: 12px 24px;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
  }
}
</style>
